<template>
    <div class="cont mb-4">
        <CustomQuery @submit="changeQuery" :form-columns="queryList"></CustomQuery>
    </div>
    <div class="cont">
        <CustomTable selection :columns="columns" :data-source="data">
            <template #table-left-nav>
                <a-button @click="useGo" type="primary" :icon="h(PlusOutlined)">添加优惠卷</a-button>
            </template>
            <template #column-state>
                <a-tag color="red">启用</a-tag>
            </template>
            <template #column-action="{ record }">
                <a-switch v-model:checked="record.checked" />
            </template>
        </CustomTable>
    </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import { h } from 'vue'

import CustomTable from '@/components/customTable/CustomTable.vue';
import CustomQuery from '@/components/customQuery/CustomQuery.vue';
import { CustomQueryColumns, CustomQueryValue } from '@/components/customQuery/types';
import { CustomTableColumns, CUstomTableData } from '@/components/customTable/types';

const router = useRouter()
const useGo = () => {
    router.push('/coupon/list/add')
}

const queryList = reactive<CustomQueryColumns[]>([
    { label: '优惠卷名称', key: 'name', type: 'input' },
    { label: '优惠卷类型', key: 'type', type: 'select',options:[
        {label:'类型: 所有',value:'1'},
        {label:'类型: 全部类型',value:'2'},
        {label:'类型: 帮我送',value:'3'},
        {label:'类型: 帮我取',value:'4'},
        {label:'类型: 帮我买',value:'5'},
    ],value:'1'},
    { label: '状态', key: 'state', type: 'select',options:[
        {label:'状态: 全部',value:'1'},
        {label:'状态: 启用',value:'2'},
        {label:'类型: 禁用',value:'3'},
    ],value:'1'},
])

const changeQuery = (queryState: CustomQueryValue) => {
    alert('查询结果为' + JSON.stringify(queryState))
}

const data = ref<CUstomTableData[]>([])
const columns = reactive<CustomTableColumns[]>([
    {
        title: "优惠卷名称",
        dataIndex: "name",
        key: "name",
    },
    {
        title: "适用范围",
        dataIndex: "scopeOfApplication",
        key: "scopeOfApplication",
    },
    {
        title: "优惠金额",
        dataIndex: "discountAmount",
        key: "discountAmount",
    },
    
    {
        title: "满足条件",
        dataIndex: "meetTheConditions",
        key: "meetTheConditions",
    },
    
    {
        title: "有效天数",
        dataIndex: "discountAmount",
        key: "discountAmount",
    },
    
    {
        title: "领取人数",
        dataIndex: "numberOfRecipients",
        key: "numberOfRecipients",
    },
    
    {
        title: "使用人数",
        dataIndex: "numberOfUsers",
        key: "numberOfUsers",
    },
    {
        title: '状态',
        dataIndex:'state',
        key: 'state',
        bodyCell:'state'
    },
    {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
    },
    {
        flag: 'ACTION'
    },
]);


onMounted(() => {
    for (let i = 0; i < 100; i++) {
        data.value.push(
            {name:'标签组名称',label:'这是标签',time: '2024-08-16'}
        )
    }
})
</script>

<style scoped></style>